﻿@namespace Microsoft.FluentUI.AspNetCore.Components
@inherits FluentComponentBase

<CascadingValue TValue="InternalAppBarContext" Value="@_internalAppBarContext" IsFixed="true">
    <nav @ref="@Element" id="@Id" @attributes="AdditionalAttributes" class="@ClassValue" style="@StyleValue" role="navigation" orientation="@Orientation.ToAttributeValue()">

            @if (Items is null)
            {
                @ChildContent
            }
            else
            {
                foreach (var item in Items)
                {
                    <FluentAppBarItem IconRest="@item.IconRest" IconActive="@item.IconActive" Text="@item.Text" Href="@item.Href" Count="@item.Count" />
                }
            }
            @if (AppsOverflow.Any())
            {
                <FluentKeyCode Anchor="@($"appbar-more-{Id}")" OnKeyDown="@HandlePopoverKeyDownAsync" />
            <div id="@($"appbar-more-{Id}")" class="fluent-appbar-item" style="min-width: calc(var(--appbar-item-size)* 1px);" tabindex="0" fixed title="View more apps" @onclick="@TogglePopoverAsync">
                    <FluentStack Orientation="Orientation.Vertical"
                                 HorizontalAlignment="HorizontalAlignment.Center"
                                 VerticalAlignment="VerticalAlignment.Center"
                                 VerticalGap="0"
                                 Style="--appbar-active-indicator-width: calc(var(--design-unit)* 0.5px); height: 100%;">
                        <FluentIcon Value="@(new CoreIcons.Regular.Size24.MoreHorizontal())" Color="Color.Neutral" part="icon-rest" />
                        <FluentIcon Value="@(new CoreIcons.Regular.Size24.MoreHorizontal())" part="icon-active" />
                    </FluentStack>
                </div>
            }

        @if (AppsOverflow.Any())
        {
            @*ToDo: Make styling configurable *@
            <FluentPopover @bind-Open="_showMoreItems" AnchorId="@($"appbar-more-{Id}")"
                           HorizontalPosition="HorizontalPosition.End"
                           HorizontalInset="false"
                           VerticalPosition="VerticalPosition.Center"
                           VerticalThreshold="25"
                           Style="width: 320px; height: 200px; overflow-y: scroll; margin-top: 35px; ">
                <Body>
                    @if (PopoverShowSearch)
                    {
                        <FluentSearch @bind-Value="@_searchTerm"
                                      @bind-Value:after=HandleSearch
                                      Style="width: 100%;"
                                      Immediate="true"
                                      Placeholder="Search for apps"
                                      Autofocus="true" tabindex="0" />
                    }
                    <FluentGrid Justify="JustifyContent.FlexStart" Spacing="3" Style="margin-top: calc(var(--design-unit) * 0.5px)">
                        @foreach (var item in _searchResults)
                        {
                            <FluentGridItem xs="4" Style="width: 100px; height: 85px; display: flex; height: 85px; align-content: center; flex-wrap: wrap; justify-content: center;">
                                <FluentAppBarItem IconRest="@item.IconRest" Text="@item.Text" Href="@item.Href" Count="@item.Count" inpopover="true" />
                            </FluentGridItem>
                        }
                    </FluentGrid>
                </Body>
            </FluentPopover>
        }
    </nav>
</CascadingValue>
